<template>
  <div class="AppHeaderContainer">
    <div class="headerLogo"></div>
    <div class="headerRight">
      <div class="headerSearch">
        <div class="iconCircle" style="margin-right: 16px">
          <el-icon :size="16" color="#fff"><ArrowLeft /></el-icon>
        </div>
        <div class="iconCircle" style="margin-right: 16px">
          <el-icon :size="16" color="#fff"><ArrowRight /></el-icon>
        </div>
        <div class="headerInputCont">
          <el-icon :size="18" color="#fff" style="margin: 0 5px">
            <Search
          /></el-icon>
          <input type="text" :value="searchWord" @input="appInputChange" />
        </div>
        <div class="iconCircle2" @click="microphoneClick()">
          <el-icon :size="18" color="#fff"><Microphone /></el-icon>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
const searchWord = ref("");

const appInputChange = (event: Event) => {
  searchWord.value = (event.target as HTMLInputElement).value;
};

const microphoneClick = () => {
  console.log(searchWord.value);
};
</script>

<style scoped lang="less">
.AppHeaderContainer {
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  background-color: #d989b1;
  .headerLogo {
    width: 200px;
    display: flex;
    align-items: center;
    height: 60px;
  }
  .headerRight {
    display: flex;
    align-items: center;
    height: 60px;
    justify-content: space-between;
    .headerSearch {
      height: 100%;
      display: flex;
      align-items: center;
      .iconCircle {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background-color: rgba(255, 255, 255, 0.2);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .iconCircle2 {
        width: 32px;
        height: 32px;
        margin-left: 16px;
        border-radius: 50%;
        background-color: rgba(255, 255, 255, 0.2);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .headerInputCont {
        width: 160px;
        height: 32px;
        border-radius: 16px;
        background-color: rgba(255, 255, 255, 0.2);
        display: flex;
        overflow: hidden;
        align-items: center;
        input {
          outline: none;
          border: none;
          height: 100%;
          width: 130px;
          line-height: 32px;
          color: #fff;
          background-color: transparent;
        }
      }
    }
  }
}
</style>
